<template>
  <div>
    <van-grid :column-num="2" clickable>
      <van-grid-item
        v-for="(item, index) in list"
        :key="index"
        :icon="item.image"
      ></van-grid-item>
    </van-grid>
    <tabbar></tabbar>
  </div>
</template>


<script>
import { getCateItemList } from "../../../api/index";


import tabbar from "../../../components//myTabbar/index.vue";

export default {
  data() {
    return {
      list: [],
    };
  },
  components: {
    tabbar,
  },
  // mounted() {
  //   this.getCateItemList;
  // },
  methods: {
    // getCateItemList() {
    //   getCateItemList().then((res) => {
    //     console.log(res, "分类页面的数据");
    //   });
    // },
    
  },
  watch: {
    // 动态监听路由的变化
    $route: {
      // 处理器
      handler(newValue) {
        // console.log(newValue,"路由变了");
        const id = newValue.query.id
        // const { id } = newValue.query;
        // console.log(id,"地址的id");
        getCateItemList(id).then((res) => {
          // console.log(res, "每一个分类下的数据");
          this.list = res.data.data.hotCommodities;
          // console.log(this.list);
        });
      },
    },
  },
  // 组件实例一旦创建就会立刻调用处理器
  immediate: true,
};
</script>

<style scoped>
>>>.van-grid-item__content {
  padding: 3px 0!important;
  margin: 5px;
}
>>>.van-grid-item__icon,>>>.van-icon__image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>

